<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="layui/css/layui.css"  media="all">
    <script type="text/javascript" src="libs/jquery.min.js"></script>
    <script type="text/javascript" src="layui/layui.js"></script>

    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
<div style="padding: 20px; background-color: #fafafa;">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md8 layui-col-md-offset2">
            <div class="layui-card">
                <div class="layui-card-body" id="trainerInfo">
                    <!--<div class="layui-col-md3" style="height: 90px">-->
                        <!--&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-->
                        <!--<img src="imgs/index/r1.jpg" style="height: 100%;border-radius: 3px  ">-->
                    <!--</div>-->
                    <!--<div class="layui-col-md9" style="height: 90px">-->
                        <!--教练：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="font-weight: bolder">王王王</span><br>-->
                        <!--星级：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div id="star1"></div><br>-->
                        <!--时间：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #666666">2019-08-01 12:04:18</span>-->
                    <!--</div>-->
                    <!--<br><br><br><br>-->
                </div>
            </div>
        </div>
        <div class="layui-col-md8 layui-col-md-offset2">
            <div class="layui-card">
                <div class="layui-card-header"
                     style="text-align: center;font-size: 20px;font-weight: bolder;height: 80px;line-height: 80px">教练评论
                </div>
                <div class="layui-card-body">
                    <form class="layui-form" action="">
                        <div class="layui-col-md8 layui-col-md-offset2">
                            <br>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;教练态度：<div id="star2"></div><br>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;教练水平：<div id="star3"></div><br><br>
                            <div class="layui-form-item layui-form-text">
                                <textarea placeholder="请输入评价" class="layui-textarea" rows="10" id="evaluation"></textarea>
                            </div>
                            <button class="layui-btn layui-btn-warm" style="float: right;margin-right: 10px" type="button" onclick="commit()">提交评价</button>
                        </div>

                    </form>

                    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
                </div>
            </div>
        </div>
    </div>
</div>

<!--<div class="layui-header"></div>-->
<!--<div><div id="star2"></div></div>-->
<!--<button onclick="submit()">提交</button>-->


<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
    var eventStar;
    var trainer;
    var order;
    $(function () {
        $.ajax({
            url:"/evaluation/getOrderInfoByOid",
            type: "post",
            data: {
                oId:1,
            },
            success:function (data) {
                eventStar=data.eventStar;
                trainer=data.trainer;
                order = data.order;
                var content = "";
                content +=
                    '<div class="layui-col-md3" style="height: 90px">'+
                    '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'+
                    '<img src="imgs/index/r1.jpg" style="height: 100%;border-radius: 3px  ">'+
                    '</div>'+
                    '<div class="layui-col-md9" style="height: 90px">'+
                    '教练：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="font-weight: bolder">'+trainer.tName+'</span><br>'+
                    '星级：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div id="star1"></div><br>'+
                    '时间：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #666666">'+order.oUpdatetime+'</span>'+
                    '</div>'+
                    '<br><br><br><br>';
                $("#trainerInfo").html(content);
            }
        });
    });
    var star1,star2;
    layui.use(['rate','form', 'layedit', 'layer'], function() {

        var rate = layui.rate
        ,form = layui.form
        ,layedit = layui.layedit
        ,layer = layui.layer;
        rate.render({
            elem: '#star2'
            ,value: 5 //初始值
            ,half: false //开启半星
            ,text: true //开启文本显示
            ,setText: function(value){ //自定义文本的回调
                var arrs = {
                    '0': '暂无评价'
                    ,'1': '很不满意'
                    ,'2': '不满意'
                    ,'3': '一般'
                    ,'4': '满意'
                    ,'5': '很满意'
                };
                this.span.text(arrs[value] || ( value + "星"));
            }
            ,choose: function(value){
                star1 = value;
                //alert(value);
            }
        })
        rate.render({
            elem: '#star3'
            ,value: 5 //初始值
            ,half: false //开启半星
            ,text: true //开启文本显示
            ,setText: function(value){ //自定义文本的回调
                var arrs = {
                    '1': '这个教练很垃圾'
                    ,'2': '完全不符合预期'
                    ,'3': '低于预期'
                    ,'4': '符合预期'
                    ,'5': '超出预期'
                };
                this.span.text(arrs[value] || ( value + "星"));
            }
            ,choose: function(value){
                star2 = value;
                //alert(value);
            }
        })
        rate.render({
            elem: '#star1'
            ,value: eventStar
            ,half: true
            ,readonly: true
        });
    });

    function commit() {
        var star = (parseInt(star1)+parseInt(star2))/2;
        var val = $("#evaluation").val();
        // alert(star);
        if (!isNaN(star)) {
            $.ajax({
                url:"/evaluation/addEvaluation",
                type:"post",
                data:{
                    eOid:order.oId,
                    eTId:trainer.tId,
                    eStar:star,
                    eMessage:val,
                },
                dataType:"json",
                success:function(data){
                    alert(data);
                }
            });
        }else{
            layer.msg("请选择要评价的星星数");
        }

        //layer.alert(val);

    }


</script>

</body>